<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            border: 3px solid red;
            
           
            width: 1000px;
            height: 600px;
            background-color: aqua;
            margin: auto;
            position: relative;
        }
       
        .content{
            border: 2px solid red;

          
            list-style: none;
            padding: 0%;
            top: 15px;
           
            width: 95%;
            height: 50px;
            position: absolute;
           margin-left: 28px;
            

        }
         span{
            text-align: center;
        
            font-size: large;

           
        }

        .content li {
            display: inline-block;
            padding: 8px 16px;
            margin-right: 10px;
            float: right;
            font-size:large;
            margin-top: auto;
        
        }
        .top h2{
            left:50px;
            position:absolute;
            top: 21px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="top">
            <h2>每日特价</h2>
            <ul class="content">
            <li class="thing"><a href="">预告</a>
            <li class="thing"><a href="">个护</a>
            <li class="thing"><a href="">百货</a>
            <li class="thing"><a href="">美食</a>
            <li class="thing first"><a href="">精选</a>
            </ul>
        </div>
        <div class="Content"> 
            <div class="main active">
                <img src="./image/f70a13db8bf24ae0c3a8b0c73732eb7a.jpg" alt="">
            </div>
            <div class="main">
                <img src="./image/微信图片_20250914173110_7_103.jpg" alt="">
            </div>
             <div class="main">
                <img src="./image/微信图片_20250914174253_8_103.jpg" alt="">
            </div>
             <div class="main">
                <img src="./image/微信图片_20250914182751_15_103.jpg" alt="">
            </div>
        </div>
        
    </div>
    <script>
        
        const content=document.querySelector('.content')
       
        const Content=document.querySelector('.Content')
       
       
        for(let i=0;i<content.length;i++){
        content[i].addEventListener('click',function(){
             const lst=document.querySelector('li.first')
             lst.classList.remove('active')
             lst[i].add('active')

             const divs=document.querySelector('div.active')

             divs.classList.remove('active')

             divs[i].classList.add('active')
        })
        }
        
        
           
            
        








    </script>
</body>

</html>